<template>
    <div>
      <template>
        <el-table
          :columns="columns"
          :data="tableData"
          v-model="accountForm"
          border>
          <el-table-column v-for="(column, index) in columns" :key="index" :label="column.text" :width="column.width">
            <template slot-scope="scope">
              <template v-if="column.useSlot">
                <template v-if="column.value === 'operate'">
                  <el-button type="text" @click="_getPlacardDetails">详情</el-button>
                </template>
              </template>
              <template v-else>
                {{ scope.row[column.value] }}
              </template>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <tr-drawer
        v-model="collapse"
        :auto-hide="false"
        show-close="true"
        width="600px"
        custom-class="customClass"
      >
        <template>
         <CardDetails/>
        </template>
      </tr-drawer>
    </div>
</template>

<script>
import CardDetails from '../views/card-details'
import bank from '../views/bank'
const initBankForm = {
  accountType: '',
  accountSubject: '',
  openingBank: '',
  accountNumber: ''
}
export default {
  components: { CardDetails },
  name: 'Card',
  data () {
    return {
      pageType: '',
      loading: false,
      tableData: bank,
      loadFail: false,
      accountForm: Object.assign({}, initBankForm),
      collapse: true,
      columns: [
        {
          text: '账号类型',
          value: 'account_type',
          width: 100
        }, {
          text: '账号主体',
          value: 'account_subject',
          width: 280
        }, {
          text: '账号',
          value: 'account_number',
          width: 262
        }, {
          text: '开户行',
          value: 'opening_bank',
          width: 300
        }, {
          text: '操作',
          value: 'operate',
          width: 100,
          useSlot: true
        }
      ]
    }
  },
  methods: {
    _getPlacardDetails () {
      this.collapse = false
    }
  }
}
</script>

<style scoped>

</style>
